import React, {Component} from 'react';
import echarts from 'echarts'
import '../css/LeftTop.css'

class RightCenter extends Component {

    constructor(props) {
        super(props);
        this.state = {
            index: 0,
            newData: [120, 52, 200, 334, 390, 330, 220],
            datas: [{
                name: "天"
            }, {
                name: "周"
            }, {
                name: "月"
            }]
        }
    }

    showData(data) {
        let myChart = echarts.init(document.getElementById('right-center'));
        let option = {
            color: ['#3398DB'],
            tooltip: {
                trigger: 'axis',
                axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                    type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: [
                {
                    type: 'category',
                    data: ['硬盘录像', '视频录像', '视频录像', '视频录像', '视频录像', '硬盘录像', '硬盘录像'],
                    axisTick: {
                        alignWithLabel: true
                    },
                    axisLine: {
                        lineStyle: {
                            color: 'white'
                        }
                    },
                    axisLabel: {
                        interval: 0,
                    },
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    axisLine: {
                        lineStyle: {
                            color: 'white'
                        }
                    },
                    splitLine: {
                        show: false     //去掉网格线
                    },
                }
            ],
            series: [
                {
                    name: '硬件统计率',
                    type: 'bar',
                    barWidth: '30',
                    data: data,
                    itemStyle: {
                        normal: {
                            color: function (params) {
                                var colorList = [
                                    '#11c0ff', '#f35945', '#fda237', '#bd4ae6', '#5fcc5f',
                                    '#dcca36', '#42b135'
                                ];
                                return colorList[params.dataIndex]
                            },
                            label: {
                                show: true,
                                position: 'top',
                                formatter: '{c}'
                            }
                        }
                    },
                }
            ]
        };


        myChart.setOption(option);
    }

    componentDidMount() {
        let newDatas = [120, 52, 200, 334, 390, 330, 220];
        this.showData(newDatas);
    }

    searClick(index) {
        let newDatas;
        switch (index) {
            case 0:
                newDatas = [120, 52, 200, 334, 390, 330, 220];
                break;
            case 1:
                newDatas = [330, 152, 200, 333, 310, 130, 120];
                break;
            case 2:
                newDatas = [30, 252, 100, 233, 110, 50, 80];
                break
        }
        this.showData(newDatas);
        this.setState({index: index});
    }

    render() {
        return (
            <div className="data-box4"><i className="topL"/> <i className="topR"/> <i
                className="bottomL"/> <i className="bottomR"/>
                <div className="search">

                    {this.state.datas.map((item, i) => {
                        return <div key={i} className={this.state.index === i ? "select" : "unselect"}
                                    onClick={() => this.searClick(i)}>{item.name}
                        </div>
                    })}
                </div>
                <div style={{height: '100%'}} id="right-center"/>
            </div>
        );
    }
}

export default RightCenter;
